<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>美味，可口，尽在甜品商城！</title>
  <meta name="description" content="甜品商城官网，致力于打造最好吃、最方便的甜品网上下单平台。" />
  <meta name="keywords" content="甜品商城,圣诞节,蛋糕,糖水,奶茶,糖食" />
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<!-- 网页头部模块 -->
<header>
  <!-- 快捷菜单模块 -->
  <div class="xtx-shortcut">
    <nav class="container">
      <ul class="fr">
        <li><a href="#">请先登录</a>|</li>
        <li><a href="#">免费注册</a>|</li>
        <li><a href="#">我的订单</a>|</li>
        <li><a href="#">会员中心</a>|</li>
        <li><a href="#">帮助中心</a>|</li>
        <li><a href="#">在线客服</a>|</li>
        <li><a href="#">收藏夹</a>|</li>
      </ul>
    </nav>
  </div>

  <!-- 主导航模块 -->
  <div class="xtx-main-nav container">
    <!-- 左侧的logo -->
    <h1 class="logo fl">
      <a href="#">甜品商城</a>
    </h1>

    <!-- 中间的导航 -->
    <nav class="fl">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">圣诞节</a></li>
        <li><a href="#">蛋糕</a></li>
        <li><a href="#">糖水</a></li>
        <li><a href="#">奶茶</a></li>
        <li><a href="#">糖食</a></li>
      </ul>
    </nav>

    <!-- 右侧的搜索 -->
    <div class="search fl">
      <input type="search" placeholder="搜一搜">
    </div>

    <!-- 右侧的购物车 -->
    <div class="cart fl">
      <span>2</span>
    </div>
  </div>
</header>

<!-- 网站入口：焦点图和分类 -->
<div class="xtx-entry">
  <div class="container">
    <!-- 焦点图 -->
    <section class="banner">
      <ul>
        <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
      </ul>
      <!-- 左右箭头 -->
      <a href="#" class="prev"></a>
      <a href="#" class="next"></a>
      <!-- 轮播指示器 -->
      <ol class="indicator">
        <li></li>
        <li></li>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ol>
    </section>

    <!-- 分类 -->
    <aside class="category">
      <ul>
        <li>
          <a href="#">
            圣诞节<span>圣诞糖果</span> <span>圣诞饼干</span>
          </a>
        </li>
        <li>
          <a href="#">
            蛋糕<span>千层</span> <span>生日蛋糕订做</span>
          </a>
        </li>
        <li>
          <a href="#">
            糖水<span>西米露</span> <span>双皮奶</span>
          </a>
        </li>
        <li>
          <a href="#">
            奶茶<span>纯茶</span> <span>奶盖</span>
          </a>
        </li>
        <li>
          <a href="#">
            甜食<span>糖葫芦</span> <span>牛奶小方</span>
          </a>
        </li>
      </ul>
    </aside>
  </div>
</div>

<!-- 新鲜好物 -->
<div class="xtx-new-goods container">
  <div class="goods-hd">
    <h2>
      美味推荐
      <span>新鲜出炉 口感靠谱</span>
    </h2>
    <a href="#" class="more">查看全部</a>
  </div>

  <ul class="goods-list">
    <li>
      <a href="#">
        <img src="./1/new_goods_1.jpg" alt="">
        <h3 class="title">奥利奥蛋糕</h3>
        <p class="price"><span>¥</span> 199</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="./1/new_goods_2.jpg" alt="">
        <h3 class="title">美味马卡龙</h3>
        <p class="price"><span>¥</span> 100</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="./1/new_goods_3.jpg" alt="">
        <h3 class="title">圣诞节杯子蛋糕</h3>
        <p class="price"><span>¥</span> 15</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="./1/new_goods_4.jpg" alt="">
        <h3 class="title">日式舒芙蕾</h3>
        <p class="price"><span>¥</span> 99</p>
      </a>
    </li>
  </ul>
</div>

<!-- 生鲜商品 -->
<div class="xtx-fresh-goods container">
  <div class="goods-hd">
    <h2>甜品</h2>

    <a href="#" class="more">查看全部</a>

    <ul class="tabs">
      <li><a href="#" class="active">圣诞</a></li>
      <li><a href="#">蛋糕</a></li>
      <li><a href="#">糖水</a></li>
      <li><a href="#">奶茶</a></li>
      <li><a href="#">糖食</a></li>
    </ul>

  </div>
  <div class="goods-content">
    <div class="goods-pic fl">
      <!-- 大图片 -->
      <a href="#">
        <img src="./1/大图.jpg" alt="">
      </a>
    </div>
    <div class="goods-list fr">
      <ul>
        <li>
          <a href="#">
            <div class="img-box">
              <img src="./1/圣诞1.jpg" alt="">
            </div>
            <div class="info">
              <h3>美味 奶油圣诞杯子蛋糕 240g/个</h3>
              <p class="type">蛋糕</p>
              <p class="price"><span>¥</span> 40</p>
            </div>
            <!-- 找相似 -->
            <div class="find">
              <p>找相似</p>
              <p>发现更多宝贝 ></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="img-box">
              <img src="./1/圣诞2.jpg" alt="">
            </div>
            <div class="info">
              <h3>超软 圣诞限定瑞士卷 100g/个</h3>
              <p class="type">糖食</p>
              <p class="price"><span>¥</span> 20</p>
            </div>
            <!-- 找相似 -->
            <div class="find">
              <p>找相似</p>
              <p>发现更多宝贝 ></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="img-box">
              <img src="./1/圣诞3.jpg" alt="">
            </div>
            <div class="info">
              <h3>可口 圣诞生日限定蛋糕 1磅/个</h3>
              <p class="type">蛋糕</p>
              <p class="price"><span>¥</span> 88</p>
            </div>
            <!-- 找相似 -->
            <div class="find">
              <p>找相似</p>
              <p>发现更多宝贝 ></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="img-box">
              <img src="./1/圣诞4.jpg" alt="">
            </div>
            <div class="info">
              <h3>糯唧唧 圣诞限定糍 2个装</h3>
              <p class="type">糖食</p>
              <p class="price"><span>¥</span> 13</p>
            </div>
            <!-- 找相似 -->
            <div class="find">
              <p>找相似</p>
              <p>发现更多宝贝 ></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="img-box">
              <img src="./1/圣诞5.jpg" alt="">
            </div>
            <div class="info">
              <h3>好吃 圣诞限定泡芙 3个装</h3>
              <p class="type">糖食</p>
              <p class="price"><span>¥</span> 45</p>
            </div>
            <!-- 找相似 -->
            <div class="find">
              <p>找相似</p>
              <p>发现更多宝贝 ></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="img-box">
              <img src="./1/圣诞6.jpg" alt="">
            </div>
            <div class="info">
              <h3>一口脆 圣诞树曲奇 1个装</h3>
              <p class="type">饼干</p>
              <p class="price"><span>¥</span> 5</p>
            </div>
            <!-- 找相似 -->
            <div class="find">
              <p>找相似</p>
              <p>发现更多宝贝 ></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="img-box">
              <img src="./1/圣诞7.jpg" alt="">
            </div>
            <div class="info">
              <h3>小蛋糕 圣诞限定纸盒蛋糕 1个装</h3>
              <p class="type">蛋糕</p>
              <p class="price"><span>¥</span> 50</p>
            </div>
            <!-- 找相似 -->
            <div class="find">
              <p>找相似</p>
              <p>发现更多宝贝 ></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="img-box">
              <img src="./1/圣诞8.jpg" alt="">
            </div>
            <div class="info">
              <h3>面包 圣诞限定吐司创意 1个装</h3>
              <p class="type">糖食</p>
              <p class="price"><span>¥</span> 5</p>
            </div>
            <!-- 找相似 -->
            <div class="find">
              <p>找相似</p>
              <p>发现更多宝贝 ></p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<!-- 最新专题 -->
<div class="xtx-topics">
  <div class="container">
    <div class="goods-hd">
      <h2>最新专题</h2>
      <a href="#" class="more">查看全部</a>
    </div>
    <ul class="goods-list">
      <li>
        <a href="#">
          <div class="box">
            <div class="info">
              <h3>吃这些美食才不算辜负自己</h3>
              <div class="type">美味好吃甜食</div>
              <div class="price"><span>¥</span> 5.0起</div>
            </div>
          </div>
        </a>
        <div class="social">
          <span class="like"> 1220</span>
          <span class="view"> 1800</span>
          <span class="reply"> 246</span>
        </div>
      </li>
      <li>
        <a href="#">
          <div class="box">
            <div class="info">
              <h3>和爱的人来一份冬日下午茶</h3>
              <div class="type">美味好吃甜食</div>
              <div class="price"><span>¥</span> 5.0起</div>
            </div>
          </div>
        </a>
        <div class="social">
          <span class="like"> 1220</span>
          <span class="view"> 1800</span>
          <span class="reply"> 246</span>
        </div>
      </li>
      <li>
        <a href="#">
          <div class="box">
            <div class="info">
              <h3>千万不能错过的秋冬限定抹茶卷</h3>
              <div class="type">美味好吃甜食</div>
              <div class="price"><span>¥</span> 5.0起</div>
            </div>
          </div>
        </a>
        <div class="social">
          <span class="like"> 1220</span>
          <span class="view"> 1800</span>
          <span class="reply"> 246</span>
        </div>
      </li>
    </ul>
  </div>
</div>

<!-- 网页底部模块 -->
<footer>
  <!-- 联系方式 -->
  <section class="xtx-contact">
    <div class="container">
      <!-- 客户服务 -->
      <dl class="customer">
        <dt>客户服务</dt>
        <dd class="chat">在线客服</dd>
        <dd class="feedback">问题反馈</dd>
      </dl>

      <!-- 关注我们 -->
      <dl class="follow">
        <dt>关注我们</dt>
        <dd class="weixin">公众号</dd>
        <dd class="weibo">微博</dd>
      </dl>

      <!-- 加微信下单 -->
      <dl class="download">
        <dt>加微信下单</dt>
        <dd class="qrcode">
          <img src="./1/qrcode.jpg" alt="">
        </dd>
        <dd class="info">
          <p>扫描二维码</p>
          <p>立马下单</p>
        </dd>
      </dl>

      <!-- 服务热线 -->
      <dl class="tel">
        <dt>服务热线</dt>
        <dd class="hotline">
          <p>900-0000-000</p>
          <p>周一至周日 8:00-18:00</p>
        </dd>
      </dl>

    </div>
  </section>

  <!-- 宣传服务 -->
  <section class="xtx-service">
    <div class="container">
      <a href="#">价格亲民</a>
      <a href="#">配送快捷</a>
      <a href="#">口感舒适</a>
    </div>
  </section>

  <!-- 版权信息 -->
  <section class="xtx-copyright">
    <p>
      <a href="#">关于我们</a> |
      <a href="#">帮助中心</a> |
      <a href="#">售后服务</a> |
      <a href="#">配送与验收</a> |
      <a href="#">商务合作</a> |
      <a href="#">搜索推荐</a> |
      <a href="#">友情链接</a>
    </p>
    <p>CopyRight @ 甜品商城</p>
  </section>
</footer>
</body>
</html>